<template>
  <!--转卡表单-->
  <div class="ziliao">
    <wv-group title="接收人姓名">
      <wv-input placeholder="请输入接收人姓名" v-model="transfervipcard.receiveName"></wv-input>
    </wv-group>
    <wv-group title="接收人手机号">
      <wv-input placeholder="请输入接收人手机号" v-model="transfervipcard.receivePhone" type="number" :maxlength="11" pattern="/^((13|14|15|17|18)[0-9]{1}\d{8})$/"></wv-input>
    </wv-group>
    <wv-group title="备注">
      <wv-textarea placeholder="请输入备注" v-model="transfervipcard.remark" :rows="6" show-counter max-length="500"></wv-textarea>
    </wv-group>
    <p class="title">转卡说明</p>
    <p class="des">您的贵宾卡有一次转卡机会，转卡后您将不再尊享此卡权益，如想继续尊享贵宾服务，可再次购买</p>
    <p class="offer" @click="goNext(transfervipcard)">转卡</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {Toast} from 'we-vue'
  export default {
    name: '',
    props: {},
    data() {
      return {
        transfervipcard: {}
      };
    },
    methods: {
      goNext(transfervipcard){
        console.log(transfervipcard);
        var msg = this.checkForm(transfervipcard);
        if(!msg.result){
          Toast.text(msg.info);
          return;
        }
        var transfervipcardInfo = JSON.stringify(transfervipcard);
        this.$router.push({path: 'zhuankamsg', query: {transfervipcardInfo: transfervipcardInfo}})
      },
      checkForm(transfervipcard){
        var msg = {};
        if (this.$myUtils.isNull(transfervipcard.receiveName)) {
          msg['result'] = false;
          msg['info'] = '请填写接收人姓名';
          return msg;
        }
        if (this.$myUtils.isNull(transfervipcard.receivePhone)) {
          msg['result'] = false;
          msg['info'] = '请填写接收人手机号';
          return msg;
        }
        if (!this.$myUtils.checkMobile(transfervipcard.receivePhone)) {
          msg['result'] = false;
          msg['info'] = '请填写正确的手机号';
          return msg;
        }
        msg['result'] = true;
        msg['info'] = '校验成功';
        return msg;
      }
    },
    created() {
      this.transfervipcard['accountGoodsId'] = this.$route.query.accountGoodsId;
      this.transfervipcard['remark'] ='';
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .ziliao {
    padding-bottom: 50px;
  }

  .title {
    font-size: 20px;
    color: #111;
    text-align: left;
    padding: 10px;
    margin-top: 10px;
  }

  .des {
    font-size: 15px;
    color: #666;
    text-align: left;
    line-height: 25px;
    padding: 0 10px;
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
</style>
